<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6-Vue侦听器watch$</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="firstName">
        <br>
        <input type="text" v-model="lastName">

        <div>{{fullName}}</div>
        <div>{{myFullName}}</div>

        <router-link tag="button" to="/one">按钮一</router-link>
        <router-link tag="button" to="/two">按钮二</router-link>
        <router-view></router-view>
    </div>

    <template id="one">
        <div>
            <p>第一个页面</p>

            123
        </div>
    </template>
    <template id="two">
        <div>
            <p>第二个页面</p>
        </div>
    </template>
</body>
<script type="text/javascript">

    const one = {
        template:'#one'
    }
    const two = {
        template: '#two'
    }
    const routes = [
        {path:'/one' , component: one},
        {path:'/two' , component: two},
    ]
    const router = new VueRouter({
        routes:routes
    })

    // - 使用watch来响应数据的变化
    // - 一般用于异步或者开销较大的操作
    // - watch 中的属性 一定是data 中 已经存在的数据
    // - **当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听**

    let vue = new Vue({
        el:'#app',
        data: {
            firstName:'Soap',
            lastName:'T',
            fullName:'d'
        },
        router:router,
        components: {
            one:one,
            two:two
        },
        // 监听器实现
        watch: {
            // val : 改变后的数据   valOld改变前的数据
            firstName: function (val , valOld) {
                console.log(valOld)
                this.fullName = val + '' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + '' + val
            },

            // vue还可以监听路由信息
            '$route.path': function (newVal , oldVal) {
                console.log(newVal + oldVal)
            }

        },
        // 计算属性实现
        computed : {
            myFullName() {
                return this.firstName + '' + this.lastName
            }
        }
    })

</script>
</html>